<template>
  <div class="member-con">
    <div class="head-con" v-if="isLog">
      <div class="my-info" @click="toMyInfo">
        <div class="head-icon">
          <img :src="myImg" alt="我的头像" width="50px" v-if="sex == 0" />
          <img :src="myImg" alt="我的头像" width="50px" v-else />
        </div>
        <div class="my-info-detail">
          {{ name }}
          <img
            src="../../assets/img/member/sex0.png"
            alt=""
            width="18px"
            v-if="sex == 0"
          />
          <img
            src="../../assets/img/member/sex1.png"
            alt=""
            width="18px"
            v-else
          />
        </div>
      </div>
      <div class="records">
        <!-- <div class="records-item">
          <div>历史记录</div>
        </div> -->
        <div class="records-item" @click="toMyOrder">我的订单</div>
        <div class="records-item" @click="toMyLike">我的喜欢</div>
        <div class="records-item" @click="toMyComment">我的评论</div>
        <div class="records-item" @click="toMyInfo">个人主页 ></div>
      </div>
    </div>
    <div class="head-con" v-else>
      <div class="my-info">
        <div class="head-icon">
          <img
            src="../../assets/img/member/visitor.jpg"
            alt="我的头像"
            width="50px"
          />
        </div>
        <div class="oparate" @click="login">
          <span>登录</span>
        </div>
      </div>
    </div>
    <hr />
    <div class="foot-con">
      <!-- <div class="message" @click="toMessage">
        <div>消息通知</div>
        <div>></div>
      </div> -->
      <!-- <hr /> -->
      <div class="message" @click="toConnect">
        <div>联系我们</div>
        <div>></div>
      </div>
    </div>
    <hr />
  </div>
</template>

<script>
export default {
  name: "MemberContainer",
  data() {
    return {
      isLog: false,
      username: "",
      myImg: require("../../assets/img/member/girl.jpg"),
      name: "他脑子进花生了",
      sex: 0,
    };
  },
  activated() {
    if (localStorage.getItem("UserInfo")) {
      this.isLog = true;
      this.name = window.JSON.parse(localStorage.getItem("UserInfo")).name;
      this.username = window.JSON.parse(
        localStorage.getItem("UserInfo")
      ).username;
      const rSex = window.JSON.parse(localStorage.getItem("UserInfo")).sex;
      // 从local里面得到用户的性别，如果是空，则默认是女生。
      if (!rSex) {
        this.sex = 0; //默认是女生
      } else {
        this.sex = rSex;
      }
      if (this.sex == 0) {
        this.myImg = require("../../assets/img/member/girl.jpg");
      } else {
        this.myImg = require("../../assets/img/member/boy.jpg");
      }
    } else {
      this.isLog = false;
    }
  },
  methods: {
    toMyOrder() {
      this.$router.push("/idssp/order/myOrder");
    },
    toMyLike() {
      this.$router.push("/idssp/member/myLike");
    },
    toMyComment() {
      this.$router.push("/idssp/member/myComment");
    },
    toMyInfo() {
      this.$router.push({
        path: "/idssp/member/myinfo",
        query: { img: this.myImg, sex: this.sex },
      });
    },
    toMessage() {
      this.$router.push("/idssp/member/message");
    },
    toConnect() {
      this.$router.push("/idssp/member/connect");
    },
    login() {
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="scss" scoped>
.member-con {
  // color: #fff;

  .head-con {
    padding-bottom: 20px;
    .my-info {
      width: 100%;
      padding: 40px 20px;
      display: flex;
      justify-content: center;
      .head-icon {
        width: 50px;
        height: 50px;
        border-radius: 100%;
        // background: url('../../img/member/girl.jpg') no-repeat;
        // background-size: 100% 100%;
      }
      .my-info-detail {
        margin-left: 30px;
        font-size: 23px;
        font-weight: 1000;
        line-height: 50px;
        img {
          vertical-align: middle;
        }
      }
      .oparate{
        padding-left: 50px;
        padding-top: 15px;
        font-size: 17px;
        font-weight: 1000;
      }
    }
    .records {
      width: 100%;
      height: 50px;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      line-height: 50px;
      .records-item {
        background-color: #fff;
        font-size: 15px;
        padding: 0 13px;
        // margin-left: 14px;
        text-align: center;
      }
      .records-item:last-child {
        background-color: #e25b45;
        margin-right: 0;
      }
    }
  }
  .foot-con {
    .message {
      width: 100%;
      height: 50px;
      // margin-top: 30px;
      padding: 0 15px;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      font-size: 15px;
      font-weight: 1000;
      line-height: 50px;
    }
  }
  .reg-btn {
    margin: 30px 7px;
    background-color: #fd5e01;
    color: #fff;
    width: 96%;
    height: 34px;
    border-radius: 50px;
    text-align: center;
    line-height: 34px;
    font-size: 14px;
  }
}
</style>